<template>
  <div>
    <el-form
      class="app-container"
      ref="elForm"
      :model="formData"
      size="medium"
      :inline="true"
      label-width="100px"
    >
      <el-form-item label="是否回复:" prop="field101">
        <el-select
          v-model="formData.field101"
          placeholder="请选择状态"
          clearable
          @change="getType"
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in field101Options"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提交时间:" prop="field103">
        <el-date-picker
          v-model="formData.field103"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :style="{ width: '100%' }"
          placeholder="请选择提交时间"
          @change="getTime"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="关键词:" prop="field106">
        <el-input
          v-model="formData.field106"
          placeholder="请输入姓名，电话搜索"
          clearable
          @change="getKey"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item label prop="field107">
        <el-button
          type="primary"
          size="medium"
          v-hasPermi="['service:complaint:query']"
          @click="search"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      :max-height="tableHeight"
      style="width: 95%; margin: auto"
      :header-cell-style="{ background: '#f7f7f7' }"
    >
      <el-table-column
        type="index"
        width="50"
        label="序号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="phone"
        label="电话"
        width="120"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="checkCode"
        label="查看码"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="suggestionType"
        label="类型"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        width="365"
        prop="suggestionContent"
        label="投诉或建议"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="applyTime)"
        label="投诉时间"
        width="200"
        align="center"
      >
        <template slot-scope="scope">{{
          newDate(scope.row.applyTime)
        }}</template>
      </el-table-column>
      <el-table-column
        width="326"
        prop="replyContent"
        label="回复"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="replyTime"
        label=" 回复时间"
        width="155"
        align="center"
      >
        <template slot-scope="scope">{{
          newDate(scope.row.replyTime)
        }}</template>
      </el-table-column>
      <el-table-column label="操作" width="96" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            v-hasPermi="['service:complaint:edit']"
            @click="checkDetail(scope.row)"
            >回复</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      class="pagination"
      align="right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="logList.page"
      :page-size="logList.pageSize"
      background
      :total="total"
    ></el-pagination>
    <!-- 回复弹出框 -->
    <el-dialog
      title="回复"
      :visible.sync="dialogVisible"
      width="40%"
      style="margin-top: 10%"
    >
      <el-row type="flex" class="row-bg" justify="center">
        <el-col :span="10" style="margin-left:20px">
          <div class="grid-content bg-purple">姓名: {{ content.name }}</div>
        </el-col>
        <el-col :span="11">
          <div class="grid-content bg-purple-light">
            投诉时间:{{ newDate(content.applyTime) }}
          </div>
        </el-col>
      </el-row>

      <div style="margin-left: 50px; margin-top: 20px; display: flex">
        投诉/建议内容:
        <div style="width: 70%">{{ content.suggestionContent }}</div>
      </div>
      <div style="margin-top: 20px; display: flex; margin-left: 50px">
        <div style="margin-bottom: 30px">回复内容:</div>
        <el-input
          type="textarea"
          :autosize="{ minRows: 6, maxRows: 12 }"
          :rows="2"
          placeholder="请输入内容"
          v-model.trim="textarea"
          :disabled="forbid"
          style="width: 70%; margin-left: 5px"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getSubmits">提交</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { suggestion, reply } from "@/api/service/complaint";
import utils from "../../js/index";
export default {
  name: "Complaint",
  components: {},
  props: [],
  data() {
    return {
      // 投诉列表
      tableData: [],
      // 回复弹出框
      dialogVisible: false,
      // 回复内容
      textarea: "",
      // 详情
      content: "",
      // 数据总条数
      total: null,
      //禁止回复
      forbid: true,
      // 加载中
      loading: true,
      formData: {
        field101: "全部",
        field103: null,
        field106: undefined,
        field107: undefined
      },
      field101Options: [
        {
          label: "全部",
          value: 2
        },
        {
          label: "已回复",
          value: 1
        },
        {
          label: "未回复",
          value: 0
        }
      ],
      // 查询列表传递的参数
      logList: {
        page: 1,
        pageSize: 10,
        isReply: 2,
        keyword: "",
        applyTime: ""
      },
      //回复传递的参数
      replys: {
        id: "",
        replyContent: ""
      },
      tableHeight: ""
    };
  },
  computed: {},
  watch: {
    "logList.page": {
      handler: function(res) {
        this.logList.page = res;
        this.search();
      }
    },
    deep: true
  },
  created() {
    // 当前屏幕高度
    this.tableHeight = window.innerHeight - 290;
    this.getSuggestion();
  },
  mounted() {},
  methods: {
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.logList.page = val;
      this.currentPage = val;
    },
    // 投诉建议列表
    getSuggestion() {
      var that = this;
      suggestion(that.logList).then(response => {
        this.tableData = response.data.suggestionInfos;
        this.total = response.data.totalPage * response.data.pageSize;
        this.loading = false;
      });
    },
    // 是否回复
    getType(val) {
      this.logList.isReply = parseInt(val);
    },
    // 提交时间
    getTime() {
      this.logList.applyTime = this.formData.field103;
    },
    // 关键词
    getKey() {
      this.logList.keyword = this.formData.field106;
    },
    // 搜索按钮
    search() {
      suggestion(this.logList).then(response => {
        this.tableData = response.data.suggestionInfos;
        this.total = response.data.totalPage * response.data.pageSize;
      });
    },
    // 日期格式化
    newDate(date) {
      return utils.utils.NewDate(date);
    },
    // 回复弹框
    checkDetail(val) {
      // console.log(val.replyContent);
      this.dialogVisible = true;
      this.content = val;
      if (val.replyContent != " ") {
        this.textarea = val.replyContent;
        this.forbid = true;
      } else {
        this.forbid = false;
      }
    },
    // 提交回复
    getSubmits() {
      if (this.textarea == "") {
        this.$message.error("请把内容填写完整");
      } else {
        reply({
          id: this.content.id,
          replyContent: this.textarea
        }).then(res => {
          if (res.code == 200) {
            this.textarea = "";
            this.getSuggestion();
            this.dialogVisible = false;
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    }
  }
};
</script>

<style>
.pagination {
  margin-top: 2%;
  margin-bottom: 2%;
}
.one-txt-cut {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
